<template>
    <section id="housing_allocation">
        <p class="title">房屋配置</p>
        <ul class="allocation_list">
            <li>
                <img src="../../assets/image/Bed.png" alt="床">
                <p>床</p>
            </li>
            <li>
                <img src="../../assets/image/ac.png" alt="空调">
                <p>空调</p>
            </li>
            <li>
                <img src="../../assets/image/Heater.png" alt="热水器">
                <p>热水器</p>
            </li>
            <li>
                <img src="../../assets/image/wifi.png" alt="宽带">
                <p>宽带</p>
            </li>
            <li>
                <img src="../../assets/image/WashingMachine.png" alt="洗衣机">
                <p>洗衣机</p>
            </li>
            <li>
                <img src="../../assets/image/Wardrobe.png" alt="衣柜">
                <p>衣柜</p>
            </li>
            <li>
                <img src="../../assets/image/Fridge.png" alt="冰箱">
                <p>冰箱</p>
            </li>
            <li>
                <img src="../../assets/image/tv.png" alt="电视机">
                <p>电视机</p>
            </li>
            <li>
                <img src="../../assets/image/Heating.png" alt="暖气">
                <p>暖气</p>
            </li>
            <li>
                <img src="../../assets/image/wc.png" alt="卫生间">
                <p>卫生间</p>
            </li>
        </ul>
    </section>
</template>
<style scoped>
#housing_allocation {
  border-top: 10px solid #f8f8f8;
  border-bottom: 1px solid #eee;
}
.title {
  padding: 0 10px;
  font-size: 1.125rem;
  color: #000;
}
.allocation_list {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 23px 10px 2px;
  border-bottom: 1px solid #eee;
}
.allocation_list li {
  width: 20%;
  margin-bottom: 23px;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
}
.allocation_list li img {
  width: 20px;
}
.allocation_list li p {
  font-size: 12px;
  color: #999;
}
</style>
